<template>
  <div id="register" :style="{height: windowHeight + 'px'}">
    <top/>
    <div id="register-box" :style="{height:windowHeight - 80 - 30 + 'px'}">
      <div>
        <div id="image"></div>
        <div id="input">
          <div>
            <p><input type="text" placeholder="请输入昵称" v-model="name"></p>
            <p><input type="text" placeholder="请输入你的座右铭" v-model="motto"></p>

            <p><input type="text" placeholder="请输入账户" v-model="acc"></p>
            <p><input type="password" placeholder="请输入密码" v-model="pd"></p>
            <p><input type="password" placeholder="再次输入密码" v-model="pd2"></p>

            <p><input @click="checkSubmit" type="submit" value="注册"></p>

            <p class="other-operation">已有账号？去&nbsp;<a href="/login">登录</a>&nbsp;！</p>
            <p class="other-operation">我是游客，想去&nbsp;<a href="/index">逛逛</a>&nbsp;！</p>
          </div>
        </div>
      </div>
    </div>
    <copyright/>
  </div>
</template>

<script>
import top from "../base/top";
import copyright from "../base/copyright";
import {ip} from "../../data/ip"
import axios from "axios";
export default {
  name: "register",
  components:{top,copyright},
  data(){
    return {
      windowHeight:0,
      acc: "",
      pd: "",
      pd2: "",
      name: "",
      motto:""
    }
  },
  mounted(){
    this.windowHeight = window.innerHeight
  },
  methods:{
    checkSubmit(){
      // 当以下均为真时，验证通过
      let required =this.name.trim() && this.acc.trim() && this.pd.trim() && this.pd.trim() && this.pd2.trim()
      let twoPdsEquality = this.pd.trim() === this.pd2.trim()
      let pdSecurity = this.pd.trim().length >= 6

      // 结合各种可能错误情况给予用户提示
      let alertText = null
      let addAlertText = function(text){
        if(alertText){
          alertText += "\n" + text
        }
        else{
          alertText = text
        }
      }
      if(!required){
        addAlertText("除了motto项外，其余均为必填项！")
      }
      if(!pdSecurity){
        addAlertText("密码强度不够！")
      }
      if(!twoPdsEquality){
        addAlertText("两次密码不一致！")
      }
      if(required && pdSecurity && twoPdsEquality){
        this.submit()
      }
      else{
        alert(alertText)
      }
    },//checkSubmit
    submit(){
      axios({
        url: ip + "/api/register-check",
        method: "get",
        params:{
          name:this.name.trim(),
          acc:this.acc.trim(),
          pd: this.pd.trim(),
          motto: this.motto.trim()
        }
      }).then(res=>{
        if(res.data.state === "failure"){
          alert("该账户已经被注册了！")
        }
        else{
          alert("注册成功！")
          this.$router.push("/login")
        }
      }).catch(err=>{
        alert("注册失败，服务器错误，已经反馈给后台，请稍后再试！")
      })
    }
  }
}
</script>

<style scoped>

#register{
  width:100%;
  background-color: #D7DADB;
}
/*  底部版权声明居中 */
#register > div:last-child{
  position:fixed;
  width:100%;
  bottom:0;
}

#register-box{
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;
}

#register-box > div{
  width:700px;
  height:400px;
}
/* 左侧图片 */
#image{
  float:left;
  width:60%;
  height:100%;
  background-image: url("/static/login/programmer.jpg");
  background-repeat: no-repeat;
  background-position: center;
}
/* 右侧输入框 */
#input{
  float:right;
  height:100%;
  width:39%;
  padding-right:10px;
  border-bottom:1px #2C3E50 solid;
  border-top:1px #2C3E50 solid;
  border-right:1px #2C3E50 solid;
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;
}
#input > div{
  width:100%;
}
#input input{
  width:100%;
  height:40px;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size:16px;
  padding-left:10px;

  border-radius: 10px;
  border:1px solid #2C3E50;
}
#input input:focus{
  border:1px #6DBCDB solid;
  outline:none;
}

#input input[type='submit']{
  background-color: #FC4349;
  outline: none;
  border:none;
  color:white;
  letter-spacing: 10px;
  cursor:pointer;
}

/* 注册或者去首页 */
.other-operation{
  width:100%;
  text-align: center;
  color:#2C3E50;
  margin-top:10px;
  font-size:16px;

}
.other-operation a{
  color:#FC4349;
  text-decoration: none;
}
</style>
